import React, {Component, useEffect, useState} from 'react';

function Content(props) {
   const [list,setlist]=useState([])
    useEffect(()=>{
        if(props.type===1){
            //正在
            setlist([1,2,3,4])
        }else {
            //即将
            setlist([5,6,7,8])
        }
    },[props.type])//依赖

    return(
        <div>
            <div>
                {
                    list.map((item,index)=>
                    <div key={index}>{item}</div>
                    )
                }
            </div>
        </div>
    )

}


class App extends Component {
    state={
        type:1
    }
    render() {
        return (
            <div>
                <ul>
                    <button onClick={()=>{
                        this.setState({
                            type:1
                        })
                    }}>正在</button>
                    <button onClick={()=>{
                        this.setState({
                            type:2
                        })
                    }}>即将</button>
                </ul>

                <Content type={this.state.type}></Content>
            </div>
        );
    }
}

export default App;
